<template>
  <PageWrapper dense>
    <CollapseContainer title="收款执行">
      <BasicForm @register="registerForm">
        <template #depositPercentage="{ model, field }">
          <div class="flex items-baseline">
            <Progress :percent="model[field]" :size="20" />
            <Space>
              <Button size="small" @click="handleClick(30)">30%</Button>
              <Button size="small" @click="handleClick(50)">50%</Button>
              <Button size="small" @click="handleClick(70)">70%</Button>
              <Button size="small" @click="handleClick(90)">90%</Button>
              <Button size="small" @click="handleClick(100)">100%</Button>
            </Space>
          </div>
        </template>
      </BasicForm>
    </CollapseContainer>
  </PageWrapper>
</template>

<script setup lang="ts">
import { BasicForm, useForm } from '@/components/Form';
import { drawerSchemas4 } from '../order.data';
import { CollapseContainer } from '@/components/Container';
import { PageWrapper } from '@/components/Page';
import { Progress, Space, Button } from 'ant-design-vue';
defineOptions({ name: 'executeEdit' });
const [registerForm, { setFieldsValue, validate }] = useForm({
  // layout: 'vertical',
  labelWidth: 100,
  name: 'user-drawer',
  showActionButtonGroup: false,
  baseColProps: { span: 12 },
  schemas: drawerSchemas4,
});
function handleClick(percent: number) {
  setFieldsValue({
    depositPercentage: percent
  })
}
async function handleSubmit() {
  try {
    const data = {
      ...(await validate())
    };
    return data;
  } catch (e) {
    console.log('e', e);
  } finally {
  }
}
const setFormData = (data: any) => {
  setFieldsValue(data);
};
defineExpose({ handleSubmit, setFormData });
</script>
